<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            v-model保留属性,都是在焦点变更时会触发:
                .lazy     懒更新
                .number   只保留数字，页面在输入非数字内容时会自动去除
                .trim     去除首尾空格，页面在首尾输入空格时会自动去除
            v-model应用：
                1.单选，复选框应用
                2.绑定后台数据
        -->
        <input type="text" v-model.lazy="a_0"> 焦点变即更新：{{a_0}}
        <br>
        <input type="text" v-model.number="a_0"> 只能是数值：{{a_0}}
        <br>
        <input type="text" v-model.trim="a_0"> 去除首尾空格：{{a_0}}
        <br>
        <input type="checkbox" v-model="a_1">{{a_1}}
        <br>
        <p>
            <h5>多选框_双向绑定应用</h5>
            <input type="checkbox" v-model="a_2" value="1号">1号
            <input type="checkbox" v-model="a_2" value="2号">2号
            <input type="checkbox" v-model="a_2" value="3号">3号
            <br>
            {{a_2}}
        </p>
        <br>
        <p>
            <h5>单选框_双向数据绑定应用</h5>
            <input type="radio" v-model="a_3" value="1号">1号
            <input type="radio" v-model="a_3" value="2号">2号
            <input type="radio" v-model="a_3" value="3号">3号
            <br>
            {{a_3}}
        </p>
    </div>

</body>

</html>


<script>
    var vm = new Vue({
        el:"#app",
        data:{
            a_0:"123",
            a_1:false,
            a_2:[],
            a_3:""
        }
    })
</script>